/**
 * 解析歌词
 * 返回歌词数组
 * 歌词对象
 * {time:,words:}
*/

function dislrc(){
	
	var line = lrc.split('\n');
		var result = [];  //歌词数组
	for(var i =0;i<line.length;i++){
		var str = line[i];
		var parts = str.split(']');
		//分别获取时间部分与歌词部分
		var timeStr = parts[0].substring(1);
		// console.log(timeStr);
		var obj = {
			time:parseTime(timeStr),
			words:parts[1]
		};
		result.push(obj);
		// console.log(obj.time);
	    }
		return result;
	}
	
	/**
	 * 解析时间
	 * 返回秒数
	 * 
*/
	
	function parseTime(time){
		var parts = time.split(':');
		return +parts[0]*60+ +parts[1];
	}
	
	var lrcdata = dislrc();
	
	
// 拿到需要使用的dom
var doms  = {
	audio: document.querySelector('audio'),
	ul: document.querySelector('.container ul'),
	container:document.querySelector('.container')
}

/**
	 * 计算在当前播放器播放到几秒的情况下 lrcdata数组中应该高亮显示的歌词下标
	 * 如果没有任何需要显示 则得到-1
	 * 返回需要高亮的某个下标
*/
function findIndex(){
	// 获取播放器当前时间
	var cutTime = doms.audio.currentTime;
	for(var i =0;i<lrcdata.length;i++){
		if(cutTime < lrcdata[i].time){
			return i-1;
		}
	}
	// 最后一句
	return lrcdata.length -1; 
}

//创建歌词元素li
// 动态显示歌词 
// 文档片段 
function createlrcel(){
	var frag = document.createDocumentFragment();
	for(var i =0;i<lrcdata.length;i++){
		var li = document.createElement('li');
		li.textContent = lrcdata[i].words;
		frag.appendChild(li);
	}
	doms.ul.appendChild(frag);
}
createlrcel();

var containerHeight = doms.container.clientHeight;  // 获取容器高度 也就是css设定
var liHeight = doms.ul.children[0].clientHeight;  // 单个li的高度
// console.log(doms.ul.clientHeight);
var maxoffset = doms.ul.clientHeight - containerHeight;  // 最大偏移量

/**
 * 设置ul的偏移量
 * 
*/


function setOffset() {
	var index = findIndex();
	var offset = liHeight*index + liHeight / 2  - containerHeight / 2;
	if(offset  < 0){
		offset = 0;
	}
	if(offset > maxoffset){
		offset = maxoffset;
	}
	doms.ul.style.transform = `translateY(-${offset}px)`;
	
	var li = doms.ul.querySelector('.active');
	if(li){
		li.classList.remove('active');
	}
	var li = doms.ul.children[index];
	if(li){
		li.classList.add('active');
	}
}

doms.audio.addEventListener('timeupdate',setOffset);